

import { DICT_TYPE, getIntDictOptions } from "@/utils/dict";
import { Col, Modal, Row, Flex, Radio, Spin, Form, Input, InputNumber, Select, Switch, Button, message, Upload } from "antd";
import React, { useState, useEffect, useRef, useImperativeHandle, } from "react";
import { userApi } from "@/api";
import { UploadOutlined } from '@ant-design/icons';

const { Option } = Select;
const { TextArea } = Input;

const UserForm = ({ onRef, getList = Function }) => {
    const [show, setShow] = useState(false);
    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm();



    /**@description 表单布局 */
    const formItemLayout = {
        labelCol: {
            // xs: {
            //     span: 24,
            // },
            sm: {
                span: 8,
            },
        },
        // wrapperCol: {
        //     xs: {
        //         span: 24,
        //     },
        //     sm: {
        //         span: 20,
        //     },
        // },
    };

    /**@description 取消 */
    const onCanle = () => {
        setShow(false);
    }

    /**@description 添加|修改操作 */
    const open = async ({ type = String || undefined, record = {} }) => {
        const { id = undefined } = record;
        setShow(true);
        form.resetFields();
        form.setFieldValue("type", "action." + type)

        if (type === "update") {

            if (id) {
                try {
                    setLoading(true);
                    const data = await userApi.getUser(id);
                    console.log("编辑，详情", data)
                    form.setFieldsValue({
                        type: type || undefined,
                        ...data
                    });


                } catch (error) {

                } finally {
                    setLoading(false);
                }
            }
        } else if (type === "add") {
            // // 新增 
            form.setFieldsValue({
                passWord: "123456"
            })
        } else {
        }



    }

    /**@description 异步保存数据 */
    const createMenu = async (value) => {

        try {
            const data = await userApi.createUser(value);
            getList();
            onCanle();
        } catch (error) {

        } finally {

        }

    }

    /**@description 校验表单 */
    const validateForm = async () => {
        form.validateFields().then(res => {
            console.log("校验参数：", res)
            createMenu(res)
        })
    }

    /**@description 向外暴露方法 */
    useImperativeHandle(onRef, () => ({
        open
    }))

    /**@description form表单props配置 */
    const formProps = {
        form,
        initData: {
            type: undefined,
            parentId: "0",
            menuType: "1"
        }
    }

    useEffect(() => {
        !show && form.resetFields()
    }, [show])


    const normFile = (e) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };

    return (
        <>
            <Modal
                title="会员制度编辑"
                width={1000}
                open={show}
                centered={true}
                destroyOnClose={true}
                onCancel={onCanle}
                onOk={validateForm}
            >
                <Spin spinning={loading}>
                    <Form
                        {...formItemLayout}
                        {...formProps}
                    >
                        {/* 基础信息 */}
                        <Row gutter={24}>
                            <Col span={12}>
                                <Form.Item
                                    label="等级名称"
                                    name="levelName"
                                    rules={[{ required: true, message: '请输入等级名称' }]}
                                >
                                    <Input placeholder="例如：黄金会员" />
                                </Form.Item>
                            </Col>




                            <Col span={12}>
                                <Form.Item
                                    label="等级编码"
                                    name="levelCode"
                                    rules={[{ required: true, message: '请输入等级编码' }]}
                                >
                                    <InputNumber min={1} max={10} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>

                            <Col span={12}>
                                <Form.Item
                                    label="等级图标"
                                    name="levelIcon"
                                    valuePropName="fileList"
                                    getValueFromEvent={normFile}
                                >
                                    <Upload name="logo" listType="picture">
                                        <Button icon={<UploadOutlined />}>上传图标</Button>
                                    </Upload>
                                </Form.Item>
                            </Col>

                            {/* 折扣设置 */}
                            <Col span={12}>
                                <Form.Item
                                    label="基础折扣类型"
                                    name="vipDiscountType"
                                    rules={[{ required: true }]}
                                >
                                    <Select>
                                        <Option value="百分比">百分比</Option>
                                        <Option value="折扣">折扣</Option>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={12}>
                                <Form.Item
                                    label="基础折扣率"
                                    name="vipDiscount"
                                    rules={[{ required: true, message: '请输入基础折扣率' }]}
                                >
                                    <InputNumber min={0} max={100} step={0.1} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>

                            {/* 升级条件 */}
                            <Col span={12}>
                                <Form.Item
                                    label="升级条件(积分/金额)"
                                    name="upgradeCondition"
                                >
                                    <InputNumber min={0} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>

                            <Col span={12}>
                                <Form.Item
                                    label="有效期(天)"
                                    name="validityPeriod"
                                >
                                    <InputNumber min={0} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>

                            {/* 权益设置 */}
                            <Col span={12}>
                                <Form.Item
                                    label="是否默认等级"
                                    name="isDefault"
                                    valuePropName="checked"
                                >
                                    <Switch />
                                </Form.Item>
                            </Col>

                            <Col span={12}>
                                <Form.Item
                                    label="免运费"
                                    name="freeShipping"
                                    valuePropName="checked"
                                >
                                    <Switch />
                                </Form.Item>
                            </Col>

                            <Col span={12}>
                                <Form.Item
                                    label="积分倍数"
                                    name="pointMultiplier"
                                >
                                    <InputNumber min={0} step={0.1} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>

                            <Col span={24}>
                                <Form.Item
                                    label="等级特权描述"
                                    name="description"
                                >
                                    <TextArea  placeholder="例如：享受专属客服、生日礼包等特权" />
                                </Form.Item>
                            </Col>
                        </Row>

                    </Form>
                </Spin>

            </Modal>
        </>
    )
}
export default UserForm;
